<template>
  <div>
    <!-- 搜索 -->
    <div class="findstudents" size="small">
      <template>
        <el-select v-model="finder" size="small" style="width:90px">
          <el-option v-for="item in find" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-input placeholder="请输入内容" v-model="input" clearable size="small" style="width:300px"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="findlist" size="small">搜索</el-button>
      </template>
    </div>
    <!-- 渲染 -->
    <el-table :data="result" border style="width: 100%" max-height="480">
       <el-table-column align="center" label="用户列表">
      <el-table-column align="center" prop="_id" label="编号" width="300"></el-table-column>
      <el-table-column align="center" prop="name" label="姓名" width="150"></el-table-column>
      <el-table-column align="center" prop="age" label="年龄" width="150"></el-table-column>
      <el-table-column align="center" prop="gender" label="性别" width="150"></el-table-column>
      <el-table-column align="center" prop="position" label="职位" width="150"></el-table-column>
      <el-table-column align="center" prop="phoneNumber" label="电话" width="150"></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
      </el-table-column>
    </el-table>
    <!-- 修改框 -->
    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
      <div>
        <div class="demo-input-suffix">
          <label for="name">姓名：</label>
          <el-input id="name" placeholder="请输入姓名" size="small" class="input" v-model="name"></el-input>
        </div>
        <div class="demo-input-suffix">
          <label for="age">年龄：</label>
          <el-input id="age" placeholder="请输入年龄" size="small" class="input" v-model="age"></el-input>
        </div>
        <div class="demo-input-suffix">
          <label for="aphoneNumberge">电话：</label>
          <el-input
            id="phoneNumber"
            placeholder="请输入电话号码"
            size="small"
            class="input"
            v-model="phoneNumber"
          ></el-input>
        </div>
        <div class="demo-input-suffix">
          <label for="aphoneNumberge">职位：</label>
          <el-select v-model="position" size="small" style="width:200px">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >{{item.label}}</el-option>
          </el-select>
        </div>
        <div class="demo-input-suffix">
          <el-radio v-model="gender" label="男">男</el-radio>
          <el-radio v-model="gender" label="女">女</el-radio>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DialogVisible(false)">取 消</el-button>
        <el-button type="primary" @click="DialogVisible(true)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const {
  mapState,
  mapActions,
  mapGetters,
  mapMutations
} = createNamespacedHelpers("userlist");
export default {
  data() {
    return {
      _id: "",
      update: [],
      position: "",
      name: "",
      age: "",
      gender: "男",
      phoneNumber: "",
      centerDialogVisible: false,
      input: "",
      finder: "name",

      options1: [
        { value: "平台管理员", label: "平台管理员" },
        { value: "门店管理员", label: "门店管理员" }
      ],
      find: [
        { value: "name", label: "姓名" },
        { value: "age", label: "年龄" },
        { value: "gender", label: "性别" },
        { value: "phoneNumber", label: "电话" }
      ]
    };
  },
  mounted() {
    this.getuser();
  },
  computed: {
    ...mapState(["list", "findlist1"]),
    ...mapGetters(["finding"]),
    // 判断是否搜索到数据
    result: function() {
      if (this.finding.length > 0) {
        return this.finding;
      } else {
        return this.list;
      }
    }
  },
  methods: {
    ...mapActions(["removeuser", "updateuser", "getuser"]),
    ...mapMutations(["finders"]),
    
    //删除
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          this.removeuser({ _id: row._id });
          this.getuser();
          this.$message({
            type: "success",

            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 修改
    handleEdit(index, row) {
      this.centerDialogVisible = true;
      this._id = row._id;
      this.name = row.name;
      this.age = row.age;
      this.gender = row.gender;
      this.position = row.position;
      this.phoneNumber = row.phoneNumber;
    },
    //获取修改后的数据，并发往后台
    DialogVisible: function(msg) {
      this.centerDialogVisible = false;
      if (msg) {
        this.updateuser({
          _id: this._id,
          name: this.name,
          age: this.age,
          gender: this.gender,
          position: this.position,
          phoneNumber: this.phoneNumber
        });
        this.getuser();
      }
    },
    //查询
    findlist: function() {
      let type = this.finder;
      let value = this.input;
      //   调用mutations方法，讲查询条件存入厂库，用于查询使用
      this.finders({ type, value });
      // 调用getter方法
      this.finding();
    }
  }
};
</script>

<style  scoped>
.input {
  width: 200px;
}
.demo-input-suffix {
  text-align: center;
  margin: 10px 0;
}
</style>